<template>


  <div class="RenOut">
  <el-form ref="form" :model="form" label-width="auto" class="page" :rules="rules" >
  <el-form-item label="停车位号码" prop="parkingSpaceNo" >
    <el-input v-model="form.parkingSpaceNo" @blur="checkno"></el-input>
  </el-form-item>
  
<el-form-item label="请选择物业方" prop="propertyManagerId" >
  <el-row :gutter="10">
    <el-col :span="6">
<el-select v-model="form.propertyManagerId" placeholder="请选择物业方"  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.propertyName"
      :value="item.propertyManagerId">
    </el-option>
  </el-select>
    </el-col>
    </el-row>
  </el-form-item>

 


  <!-- <el-form-item label="身份证号码" prop="parkingSpaceOwnerPic" >
    <el-input v-model="form.parkingSpaceOwnerPic"></el-input>
  </el-form-item> -->


<el-row :gutter="0">
   <el-col :span="5">
  <el-form-item  prop="pic3" class="upload-img-form" ref="uploadElement">
    
  <el-upload class="upload-demo"
         ref="businessLicense"
         list-type="picture" style="width:150px"
         action
        :auto-upload="false"
         :on-preview="handlePreview1"
          :on-remove="handleRemove1"
         :before-remove="beforeRemove1"
         :on-change="uploadSectionFile1"
         :limit="1">
         <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">上传停车位产权证图片</div>
          <img v-if="photo" :src="photo" class="avatar">
         
       </el-upload>
 </el-form-item>
   </el-col>

 <el-col :span="5">
<el-form-item  prop="pic">
  <el-upload class="upload-demo"
         ref="businessLicense"
         list-type="picture" style="width:150px"
         action
        :auto-upload="false"
         :on-preview="handlePreview2"
          :on-remove="handleRemove2"
         :before-remove="beforeRemove2"
         :on-change="uploadSectionFile2"
         :limit="1">
         <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">上传车位持有人身份证照片</div>
          <img v-if="photo" :src="photo" class="avatar">
         
       </el-upload>
 </el-form-item>
 </el-col>
  <el-col :span="5">
<el-form-item prop="pic1" >
 <el-upload class="upload-demo"
         ref="businessLicense"
         list-type="picture" style="width:150px"
         action
        :auto-upload="false"
         :on-preview="handlePreview3"
          :on-remove="handleRemove3"
         :before-remove="beforeRemove3"
         :on-change="uploadSectionFile3"
         :limit="1">
         <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">停车位持有人真人照</div>
          <img v-if="photo" :src="photo" class="avatar">
         
       </el-upload>
</el-form-item>
  </el-col>
 <el-col :span="5">

<el-form-item  prop="pic2">
<el-upload class="upload-demo"
         ref="businessLicense"
         list-type="picture" style="width:150px"
         action
        :auto-upload="false"
         :on-preview="handlePreview4"
          :on-remove="handleRemove4"
         :before-remove="beforeRemove4"
         :on-change="uploadSectionFile4"
         :limit="1">
         <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">上传停车位照片</div>
          <img v-if="photo" :src="photo" class="avatar">
         
       </el-upload>

</el-form-item>
 </el-col>
</el-row>

 

<el-form-item  prop="keyWords">
  <el-popover
  placement="bottom"
  width="500"
  trigger="click">
  <div class="map-box">
    <div class="map-header">
      <div>
        <el-input v-model="keyWords" placeholder="请输入要搜索的地址" style="width:250px"></el-input>
        <el-button type="success" @click="setPlace">搜索</el-button>
      </div>
    </div>
    <div id="map" ></div>
  </div>
  <el-button slot="reference">添加车位地址</el-button>
</el-popover> 
</el-form-item>




<el-form-item label="每小时收费标准" prop="hourCost">
    <el-input v-model="form.hourCost"></el-input>
  </el-form-item>
  <el-form-item label="每天收费标准" prop="dayCost">
    <el-input v-model="form.dayCost"></el-input>
  </el-form-item>
  <el-form-item label="每周收费标准" prop="weekCost">
    <el-input v-model="form.weekCost"></el-input>
  </el-form-item>


  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>
<style>

.el-row {
    margin-bottom: 20px;
   
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

.page{
  width: 800px;
  margin-left: 100px;
}
.duu{
  margin-left: 20px;
  display: block;
}
#map{
  width: 500px;
  height: 500px;
}
</style>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xQ8PhXkGnHq0wV5aGbtNGlGbaRNrUT5t"></script>
<script>

var X=0;
var Y=0;
var formData1=""
var formData2=""
var formData3=""
var formData4=""

export default {
  name: 'Login',
  data() {

    //   var checkNo = (rule, value, callback) => {
    //   if(isno){
    //     callback(new Error('你已经添加该车位！'))
    //  }
    //  }


    var checkIdCard = (rule, value, callback) => {
   let regEn = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
   if (!regEn.test(value)) {
    callback(new Error('请输入正确身份证'))
   } else {
    // 校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10
    // 下面分别分析出生日期和校验位
    let num = value.toUpperCase()
    let len, re
    len = num.length
    if (len === 15) {
     re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/)
     let arrSplit = num.match(re) // 检查生日日期是否正确
     let dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4])
     let bGoodDay
     bGoodDay = (dtmBirth.getYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4]))
     if (!bGoodDay) {
      callback(new Error('请输入正确身份证'))
     } else { // 将15位身份证转成18位 //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10
      let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
      var nTemp = 0, i
      num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6)
      for (i = 0; i < 17; i++) {
       nTemp += num.substr(i, 1) * arrInt[i]
      }
      num += arrCh[nTemp % 11]
      callback()
     }
    }
    if (len === 18) {
     re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/)
     let arrSplit = num.match(re) // 检查生日日期是否正确
     let dtmBirth = new Date(arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4])
     let bGoodDay
     bGoodDay = (dtmBirth.getFullYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4]))
     if (!bGoodDay) {
      callback(new Error('请输入正确身份证'))
     } else { // 检验18位身份证的校验码是否正确。 //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10
      let valnum
      let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
      var nTemp = 0, i
      for (i = 0; i < 17; i++) {
       nTemp += num.substr(i, 1) * arrInt[i]
      }
      valnum = arrCh[nTemp % 11]
      if (!isNaN(num.substr(17, 1))) {
       callback()
      }
      if (valnum !== num.substr(17, 1)) {
       callback(new Error('请输入正确身份证'))
      }
     }
    }
   }
  }
      return {
      isno:false,
        map: null,
      local: null,
      mk: null,
      keyWords: '',
      pointY:'',
       pointX:'',
        showPosition:false,
        intervalId:null,
        loading: false,
        ban:true,
        is:false,
        value1:"",
        value2:"",
        startTime: '',
        endTime: '',
        visible: false,
        storeLocation:[],
         files: [{}], 
         photo: '',
         photoObj: '',
                options:[{
                  propertyManagerId:"",
                  propertyName:''
                }],
        form:{
                userId:localStorage.getItem("loginUser"),
                parkingSpaceNo:"", 
                parkingSpacePropertyPic:"https://img2.baidu.com/it/u=2502248320,2254196675&fm=26&fmt=auto&gp=0.jpg",
                propertyManagerId:"",
                hourCost:"",
                dayCost:"",
                message:"待审核",
                parkingSpaceRelownerPic:"https://img0.baidu.com/it/u=2657356574,1693074398&fm=26&fmt=auto&gp=0.jpg",
                parkingSpaceOwnerPic:"https://bkimg.cdn.bcebos.com/pic/1b4c510fd9f9d72af7d58f51da2a2834359bbbcd?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto",
                weekCost:"",
                pointY:"",
                pointX:"",
                state:0,
                parkingSpaceAddr:'',
                parkingSpacePic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qjimage.com%2Fph025%2Fhigh%2F456-p00335.jpg&refer=http%3A%2F%2Fpic.qjimage.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632560044&t=40db7b877c2aa0e20e44af34608ff7a9'
              
            },

          rules: {
          parkingSpaceNo: [
            { required: true, message: '请输入停车位号码', trigger: 'blur' },
            //  { validator: checkNo, trigger: 'blur' }
          ],
          propertyManagerId: [
            { required: true, message: '请输入物业ID', trigger: 'change' }
          ],
       
          dayCost: [
            { required: true, message: '请填写费用', trigger: 'blur' }
          ],
          hourCost: [
            { required: true, message: '请填写费用', trigger: 'blur' }
          ],
           parkingSpaceOwnerPic: [
            { required: true, message: '请填写身份证号码', trigger: 'blur' },
            { validator: checkIdCard, trigger: 'blur' }
          ],
         
          //  pic: [
          //   { required: true, message: '请上传图片', trigger: 'blur' }
          // ],
          // pic1: [
          //   { required: true, message: '请上传图片', trigger: 'blur' }
          // ],
          // pic2: [
          //   { required: true, message: '请上传图片', trigger: 'blur' }
          // ],
          // pic3: [
          //   { required: true, message: '请上传图片', trigger: 'blur' }
          // ],
          

        },

        
      }
      },
     

 
  methods:{

    checkno(){
        this.$http.get("/checkno",{
          params:{
            parkingSpaceNo:this.form.parkingSpaceNo
          }
        })
        .then(res => {
          console.log(res)
                if(res.data.code==9999){
                  this.isno=true
                  console.log("车位已经被添加")
                }else{
                   this.isno=false
                   console.log("没有被添加")
                }
               
            })
            .catch(err => {
                console.error(err); 
            })
    },

     initMap(){
      this.map = new BMapGL.Map('map')
      let point = new BMapGL.Point(106.55843416, 29.56899625)
      this.map.centerAndZoom(point, 12)
      this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      this.map.addControl(new BMapGL.NavigationControl())
    },
   
    // 搜索地址
    setPlace() {
      this.local = new BMapGL.LocalSearch(this.map, {
        onSearchComplete: this.searchPlace
      })
      this.local.search(this.keyWords)
    },
    searchPlace() {
      if (this.local.getResults() != undefined) {
        this.map.clearOverlays() //清除地图上所有覆盖物
        if (this.local.getResults().getPoi(0)) {
          let point = this.local.getResults().getPoi(0).point //获取第一个智能搜索的结果
          this.map.centerAndZoom(point, 18)
          this.handleMarker(this, point)
          console.log('经度：'+ point.lng + '--' + '纬度' + point.lat)
          
        } else {
          this.$message.error('未匹配到地点!')
        }
      } else {
        this.$message.error('未找到搜索结果!')
      }
    },
    // 设置标注
    handleMarker(obj, point) {
      obj.mk = new BMapGL.Marker(point)
      obj.map.addOverlay(obj.mk)
      obj.mk.enableDragging() // 可拖拽
      obj.mk.addEventListener('dragend', function(e) { // 监听标注的拖拽，获取拖拽后的经纬度
        Y = e.latLng.lat
        X = e.latLng.lng
        console.log(Y)
        
      })
      
    },

     resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      findporperty(){
      this.$http.get("/findallProperty")
      .then(res => {
                if(res!=null){
                  this.options=res.data.data
                  
                }else{
                   
                   console.log("fail")
                }
               
            })
            .catch(err => {
                console.error(err); 
            })
      },

  
    hour(){
      console.log("asda")
      if(this.is){
       this.ban=false
       
      }else{
       this.ban=true
      }
    },
// 模块开始
     handleRemove4(file, fileList) {
       console.log(file.url);
        console.log(file, fileList);
      },

       handlePreview4(file) {
        console.log(file);
       },
      beforeRemove4(file, fileList) {
         return this.$confirm(`确定移除 ${ file.name }？`);
      },

      uploadSectionFile4(file){
        var typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
         var isJPG = typeArr.indexOf(file.raw.type) !== -1;
         var isLt3M = file.size / 1024 / 1024 < 1;
         if (!isJPG) {
           this.$message.error('只能是图片!');
           this.$refs.upload.clearFiles();
           this.files = null;
           return;
         }
         if (!isLt3M) {
           this.$message.error('上传图片大小不能超过 1MB!');
           this.$refs.upload.clearFiles();
           this.files = null;
           return;
         }
         this.files = file.raw;
           // FormData 对象
         formData4 = new FormData();
         // 文件对象
         formData4.append('file', this.files);
         let config = {
           headers: {
             'Content-Type': 'multipart/form-data'
           },
           methods: 'post'
         }       
      },

       upload4(){
          this.$http.post("/upload",formData4)
         .then(res=>{
           console.log(res)
           if(res.data.code == "0000"){
            //  this.form.parkingSpacePic = res.data.message
           }else{
             this.$message.error(res.data.message)
             
           }
         })
         },
        //  模块结束

        // 模块开始
     handleRemove1(file, fileList) {
       console.log(file.url);
        console.log(file, fileList);
      },

       handlePreview1(file) {
        console.log(file);
       },
      beforeRemove1(file, fileList) {
         return this.$confirm(`确定移除 ${ file.name }？`);
      },

      uploadSectionFile1(file){
        var typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
         var isJPG = typeArr.indexOf(file.raw.type) !== -1;
         var isLt3M = file.size / 1024 / 1024 < 1;
         if (!isJPG) {
           this.$message.error('只能是图片!');
           this.$refs.upload.clearFiles();
           this.files = null;
           return;
         }
         if (!isLt3M) {
           this.$message.error('上传图片大小不能超过 1MB!');
           this.$refs.upload.clearFiles();
           this.files = null;
           return;
         }
         this.files = file.raw;
           // FormData 对象
         formData1 = new FormData();
         // 文件对象
         formData1.append('file', this.files);
         let config = {
           headers: {
             'Content-Type': 'multipart/form-data'
           },
           methods: 'post'
         }       
      },

       upload1(){
          this.$http.post("/upload",formData1)
         .then(res=>{
           console.log(res)
           if(res.data.code == "0000"){
               //  this.form.parkingSpacePropertyPic = res.data.message
           }else{
             this.$message.error(res.data.message)
             
           }
         })
         },
        //  模块结束


        // 模块开始
     handleRemove2(file, fileList) {
       console.log(file.url);
        console.log(file, fileList);
      },

       handlePreview2(file) {
        console.log(file);
       },
      beforeRemove2(file, fileList) {
         return this.$confirm(`确定移除 ${ file.name }？`);
      },

      uploadSectionFile2(file){
        var typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
         var isJPG = typeArr.indexOf(file.raw.type) !== -1;
         var isLt3M = file.size / 1024 / 1024 < 1;
         if (!isJPG) {
           this.$message.error('只能是图片!');
           this.$refs.upload.clearFiles();
           this.files = null;
           return;
         }
         if (!isLt3M) {
           this.$message.error('上传图片大小不能超过 1MB!');
           this.$refs.upload.clearFiles();
           this.files = null;
           return;
         }
         this.files = file.raw;
           // FormData 对象
         formData2 = new FormData();
         // 文件对象
         formData2.append('file', this.files);
         let config = {
           headers: {
             'Content-Type': 'multipart/form-data'
           },
           methods: 'post'
         }    
         
         
           
      },

       upload2(){
          this.$http.post("/upload",formData2)
         .then(res=>{
           console.log(res)
           if(res.data.code == "0000"){
            //  this.form.parkingSpaceOwnerPic = res.data.message
           }else{
             this.$message.error(res.data.message)
             
           }
         })
         },
        //  模块结束


        // 模块开始
     handleRemove3(file, fileList) {
       console.log(file.url);
        console.log(file, fileList);
      },

       handlePreview3(file) {
        console.log(file);
       },
      beforeRemove3(file, fileList) {
         return this.$confirm(`确定移除 ${ file.name }？`);
      },

      uploadSectionFile3(file){
        var typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
         var isJPG = typeArr.indexOf(file.raw.type) !== -1;
         var isLt3M = file.size / 1024 / 1024 < 1;
         if (!isJPG) {
           this.$message.error('只能是图片!');
           this.$refs.upload.clearFiles();
           this.files = null;
           return;
         }
         if (!isLt3M) {
           this.$message.error('上传图片大小不能超过 1MB!');
           this.$refs.upload.clearFiles();
           this.files = null;
           return;
         }
         this.files = file.raw;
           // FormData 对象
         formData3 = new FormData();
         // 文件对象
         formData3.append('file', this.files);
         let config = {
           headers: {
             'Content-Type': 'multipart/form-data'
           },
           methods: 'post'
         }       
      },

       upload3(){
          this.$http.post("/upload",formData3)
         .then(res=>{
           console.log(res)
           if(res.data.code == "0000"){
            //  this.form.parkingSpaceRelownerPic = res.data.message
           }else{
             this.$message.error(res.data.message)
             
           }
         })
         },
        //  模块结束
         

        
      

        submitForm(formName) {
         
          this.form.pointY=Y,
          this.form.pointX=X,
          this.form.parkingSpaceAddr=this.keyWords
          console.log(this.form.parkingSpaceAddr)
          console.log(this.form.pointX)
          this.upload1()
          this.upload2()
          this.upload3()
          this.upload4()
           if(this.isno){
            this.$message.error('你的车位号已经被添加');
           
          }else{
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.form)
             this.$http.post("/addparkingspace",this.form)
          .then(res => {
                if(res!=null){
                
                  this.$message({
                    type:'success',
                    message:'添加车位成功！'
                })
                }else{
                   
                   this.$message.error('添加车位失败哦！');
                }
               
            })
            .catch(err => {
                console.error(err); 
            })
             
        }

           else {
            console.log('error submit!!');
            return false;
          }
        });
          }
      },
    
    



  },
mounted(){
  this.findporperty()
    this.initMap()
  },
   

}
  

</script>

